<template>
  <div>
    <el-form :label-width="formConfig.labelWidth || ''" :inline="formConfig.inline || true" :size="formConfig.size || 'small'" :ref="formConfig.ref"
      :model="searchData">
      <el-form-item v-for="item in searchForm.formData" :key="item.prop" :label="item.label" :prop="item.prop" :class="item.class ? item.class : ''"
        :rules="item.rules">
        <!-- slot field -->
        <template v-if="item.isSlot">
          <slot :name="item.prop" :item="item"></slot>
        </template>
        <template v-else>
          <!-- input field -->
          <el-input v-if="item.type === 'Input'" v-model="searchData[item.prop]" :placeholder="item.placeholder" :clearable="item.clearable || true"
            :suffix-icon="item.icon || ''" @change="searchForm.changeMethod && searchForm.changeMethod()"></el-input>
          <!-- select field -->
          <el-select v-if="item.type === 'Select'" style="width: 100%" v-model="searchData[item.prop]" :placeholder="item.placeholder"
            :clearable="item.clearable || true" :disabled="item.disabled" :multiple="item.multiple" :collapse-tags="item.collapseTags"
            :multiple-limit="item.multipleLimit" :filterable="item.filterable" @change="searchForm.changeMethod && searchForm.changeMethod()">
            <el-option v-for="(opItem, index) in item.options" :key="index" :label="item.sysKeys ? opItem[item.sysKeys.label] : opItem.label"
              :value="item.sysKeys ? opItem[item.sysKeys.value] : opItem.value"></el-option>
          </el-select>
          <!-- select options field -->
          <el-select v-if="item.type === 'SelectOptions'" style="width: 100%" v-model="searchData[item.prop]" :placeholder="item.placeholder"
            :clearable="item.clearable || true" :disabled="item.disabled" :multiple="item.multiple" :collapse-tags="item.collapseTags"
            :multiple-limit="item.multipleLimit" :filterable="item.filterable" @change="searchForm.changeMethod && searchForm.changeMethod()">
            <el-option-group v-for="group in item.options" :key="group.label" :label="group.label">
              <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-option-group>
          </el-select>
          <!-- date field -->
          <el-date-picker v-if="item.type === 'Date'" :type="item.isDateType || 'date'" style="width: 100%" v-model="searchData[item.prop]"
            :placeholder="item.placeholder" :clearable="item.clearable || true" :format="item.format || 'yyyy-MM-dd'"
            :value-format="item.valueFormat || 'yyyy-MM-dd'" @change="searchForm.changeMethod && searchForm.changeMethod()"></el-date-picker>
          <!-- radio field -->
          <el-radio-group v-if="item.type === 'Radio'" v-model="searchData[item.prop]" :placeholder="item.placeholder"
            :clearable="item.clearable || true" @change="searchForm.changeMethod && searchForm.changeMethod()">
            <el-radio v-for="(opItem, index) in item.options" :label="opItem.label" :key="index" :rules="item.rules"></el-radio>
          </el-radio-group>
          <!-- checkbox field -->
          <el-checkbox-group v-if="item.type === 'Checkbox'" v-model="searchData[item.prop]" :placeholder="item.placeholder"
            :clearable="item.clearable || true" @change="searchForm.changeMethod && searchForm.changeMethod()">
            <el-checkbox v-for="(opItem, index) in item.options" :label="opItem.label" :key="index" :rules="item.rules"></el-checkbox>
          </el-checkbox-group>
          <!-- textarea field -->
          <el-input v-if="item.type === 'Textarea'" type="textarea" v-model="searchData[item.prop]" :placeholder="item.placeholder"
            :clearable="item.clearable || true" @change="searchForm.changeMethod && searchForm.changeMethod()"></el-input>
          <!-- switch field -->
          <el-switch v-if="item.type === 'Switch'" v-model="searchData[item.prop]" :clearable="item.clearable || true"
            :active-color="variables.switchActiveColor" :inactive-color="variables.switchInactiveColor"
            @change="searchForm.changeMethod && searchForm.changeMethod()"></el-switch>
          <!-- cascader field -->
          <el-cascader v-if="item.type === 'Cascader'" v-model="searchData[item.prop]" :placeholder="item.placeholder" :options="item.options"
            :props="item.props" :show-all-levels="item.showAllLevels" :collapse-tags="item.collapseTags"
            @change="searchForm.changeMethod && searchForm.changeMethod()"></el-cascader>
        </template>
      </el-form-item>
      <!-- 操作 -->
      <el-form-item class="buttons-content">
        <el-button v-for="el in searchAction" :key="el.label" :type="el.type" :plain="el.plain || false" :class="`${el.class}` || ''"
          :size="formConfig.size || 'small'" :icon="el.icon || ''" @click="el.handle()">{{ el.label }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import variables from "@/theme/style.less";
export default {
  props: {
    searchForm: {
      type: Object,
      default: () => ({}),
    },
    searchData: {
      type: Object,
      default: () => ({}),
    },
    formConfig: {
      type: Object,
      default: () => ({}),
    },
    searchAction: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    variables() {
      return variables;
    },
  },
};
</script>

<style></style>
